<template>
  <div class="pd30 flex flexjcsb produceFactory">
    <div class="panelWrap main">
      <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
        <div class="dialog">
          <el-dialog @closed="handleClose" title="添加商圈" :visible="dialogFormVisible">

            <el-form :show-message="false" :rules="rules" label-position="left" ref="addData" :model="tableData" label-width="100px">
              <div style="width:80%">
                <el-form-item label="名称" prop="name">
                  <el-input placeholder="商圈名称" v-model="tableData.name"></el-input>
                </el-form-item>

                <!-- <el-form-item label="备注" prop="remark">
                  <el-input type="textarea" :rows="2" placeholder="请输入备注" v-model="tableData.remark"></el-input>
                </el-form-item> -->

              </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="add(false)">取 消</el-button>
              <el-button v-if="!isEdit" type="primary" @click="add(true)">确 定</el-button>
              <el-button v-else type="isEdit" @click="handleEditLog">更 新</el-button>
            </div>
          </el-dialog>

          <el-button @click="dialogFormVisible = true" class="addBtn fw" type="primary">添加商圈</el-button>
        </div>
      </div>
      <div class="con">
        <div class="con-row flex flexac pl search-box">
          <div class="flex">
            <el-input clearable v-model="queryParam.name" class="query-input m-r-15" placeholder="名称" @blur="handleSearch" />
          </div>

        </div>

        <el-table @row-click='handleRowClick' id="dataList" ref="dataList" class="con-table" type="expand" :data="dataList.slice((paging.currentPage - 1) * paging.pageSize, paging.currentPage * paging.pageSize)" @select="handleCheck" @select-all="handleCheck" @selection-change="handleCheckChange">
          <el-table-column width="50" type="selection" label="全选" />

          <el-table-column align="center" label="商圈名称">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="创建时间">
            <template slot-scope="scope">
              <span>{{ scope.row.crtDate }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="创建人">
            <template slot-scope="scope">
              <span>{{ scope.row.crtOprName }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="name" align="center" label="操作">
            <template slot-scope="scope">
              <el-dropdown trigger="click" @command="handleCommand">
                <el-button size="small" type="primary">
                  <i class="el-icon-s-tools" />
                  <i class="el-icon-arrow-down el-icon--right" />
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="0"><i class="el-icon-edit el-icon--left" />修改</el-dropdown-item>
                  <el-dropdown-item :command="1"><i class="el-icon-delete el-icon--left" /> 删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <!-- <el-button class="defaultbtn" type="primary" plain @click="handleEdit(scope.$index, scope.row)">
                <i />查看</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="paginationWrap flex" :current-page="paging.currentPage" :page-sizes="paging.pageSizeArr" :page-size="paging.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="paging.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <div class="panelWrap details">
      <el-table :data="currentMateria" stripe style="width: 100%">
        <el-table-column prop="key" label="属性" width="100">
        </el-table-column>
        <el-table-column prop="val" label="值" width="250">
          <template slot-scope="scope">
            <div v-if="scope.row.key === '广告'">
              <div v-for="item in scope.row.val" :key="item.id">{{item.advertName}}</div>
            </div>
            <div v-else>{{scope.row.val}}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="选择广告" :visible="dialogMateria">
      <el-table :max-height="500" id="advertList" ref="advertList" class="con-table" type="expand" :data="advertList.slice((paging.currentPage - 1) * paging.pageSize, paging.currentPage * paging.pageSize)" @select="handleCheck2" @select-all="handleCheck2">
        <el-table-column width="50" type="selection" label="全选" />

        <el-table-column align="center" label="名称">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="目录">
          <template slot-scope="scope">
            <span>{{ scope.row.directoryName }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="广告时长">
          <template slot-scope="scope">
            <span>{{ scope.row.duration }}</span>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination class="paginationWrap flex" :current-page="paging.currentPage" :page-sizes="paging.pageSizeArr" :page-size="paging.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="paging.total" @size-change="handleSizeChange2" @current-change="handleCurrentChange2" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogMateria = false">取 消</el-button>
        <el-button type="primary" @click="confirmMateria">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="选择播放器" :visible="dialogScreen">
      <el-table :max-height="500" id="advertList" ref="advertList" class="con-table" type="expand" :data="screenList.slice((paging.currentPage - 1) * paging.pageSize, paging.currentPage * paging.pageSize)" @select="handleCheck4" @select-all="handleCheck4">
        <el-table-column width="50" type="selection" label="全选" />

        <el-table-column align="center" label="名称">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="设备名称">
          <template slot-scope="scope">
            <span>{{ scope.row.equipmentName }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="目录">
          <template slot-scope="scope">
            <span>{{ scope.row.directoryName }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="商圈名称">
          <template slot-scope="scope">
            <span>{{ scope.row.businessAreaName }}</span>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination class="paginationWrap flex" :current-page="paging.currentPage" :page-sizes="paging.pageSizeArr" :page-size="paging.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="paging.total" @size-change="handleSizeChange2" @current-change="handleCurrentChange2" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogScreen = false">取 消</el-button>
        <el-button type="primary" @click="confirmScreen">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fetchBusinessList, businessDetail, businessAreaAdd, businessAreaDelete, businessAreaUpdate } from '@/api/operation/business'
import { showNotice } from '@/utils/toolclass'

export default {
  name: 'playPlanEnter',
  data() {
    return {
      addDeployList: [],
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'change' }]
      },
      screenList: [],
      isLogEdit: false,
      tableName: 'name',
      deleteList: [],
      selectMateriaList: [],//选择素材列表
      selectScreenList: [],//选择播放器列表
      multipleSelection: [],
      moduleMateria: [],// 模块素材列表
      addData: { //添加广告数据
        name: '',
        orgId: '',
        remark: ''
      },
      rowData: {},
      moveEnable: false,
      dialogScreen: false,
      dialogMateria: false,
      dialogFormVisible: false,
      isEdit: false,
      currentItem: {},
      currentMateria: [],//当前素材
      currentLog: null,//当前目录
      userInfo: {},
      paging: {
        currentPage: 1,
        pageSize: 10,
        pageSizeArr: [10, 20, 50, 100],
        total: 400
      },
      advertList: [],
      dataList: [],
      queryParam: {
        name: ''
      },
    }
  },
  computed: {
    tableData() {
      return this.isEdit ? this.currentItem : this.addData
    }
  },
  watch: {},
  created() {

  },
  mounted() {
    this.userInfo = JSON.parse(this.$storage.get('userInfo'))
    this.$storage.set('upUrl', JSON.stringify({ 'path': '/operation/media/businessArea/index' }))
    this.getList();
  },
  methods: {
    handleClose() {
      this.$refs.addData.resetFields();
      this.selectMateriaList = []
      this.resetData()
    },
    //确认添加播放器
    confirmScreen() {
      if (this.selectScreenList.length) {
        let arr = []
        this.selectScreenList.forEach((item, index) => {
          arr[index] = {
            businessAreaId: item.businessAreaId,
            screenId: item.id,
            villageId: item.villageId,
            villageName: item.villageName,
            name: item.name,
            businessAreaName: item.businessAreaName
          }
        })
        this.tableData.taskScreenDtoList.push(...arr)
      }
      this.dialogScreen = false

    },
    //确认添加广告
    confirmMateria() {
      if (this.selectMateriaList.length) {
        this.selectMateriaList = this.selectMateriaList.map((item, index) => {
          return {
            advertId: item.id,
            advertType: 1,
            dayTimes: 1,
            duration: item.duration,
            priorityPlay: 0,
            advertName: item.name,
          }
        })
        this.tableData.taskAdvertDtoList.push(...this.selectMateriaList)
      }
      this.dialogMateria = false

    },
    // 添加播放器
    addScreen() {
      this.dialogScreen = true;
      this.getScreenList();
    },
    // 删除播放器
    removeScreen() {
      let arr = this.addData.taskScreenDtoList;
      this.deleteList.forEach((item) => {
        arr.forEach((item2, index) => {
          if (item === item2) {
            this.addData.taskScreenDtoList.splice(index, 1)
          }
        })
      })
      this.deleteList = [];
    },
    // 添加广告计划
    addMateria() {
      this.getAdvertList();
      this.dialogMateria = true;
    },
    // 重置表单数据
    resetData() {
      this.addData = {
        name: '',
        orgId: '',
        remark: ''
      }
    },
    // 自定义错误弹窗
    customValid(field) {
      let arr = [];
      for (let item in field) {
        arr.push(item)
      }
      showNotice('error', '提示', field[arr[0]][0].message)
    },
    // 添加商圈
    add(flag) {
      if (flag) {
        this.$refs.addData.validate((valid, field) => {
          if (valid) {
            this.addData.orgId = this.userInfo.orgList[0].id;
            businessAreaAdd(this.addData).then(res => {
              if (res.code === '000000') {
                this.getList();
                showNotice('success', '提示', '添加成功')
                this.resetData();
                this.dialogFormVisible = false
              } else {
                showNotice('warning', '提示', res.msg)
              }
            })
          } else {
            this.customValid(field)
          }
        })
      } else {
        this.resetData();
        this.dialogFormVisible = false
        this.isEdit = false
      }
    },
    //删除商圈
    deleteItem() {
      this.$confirm('此操作将永久删除该商圈,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'addDialog'
      }).then(({ value }) => {
        businessAreaDelete(this.currentItem.id).then(res => {
          if (res.code === '000000') {
            showNotice('success', '提示', '删除成功')
            this.getList();
          } else {
            showNotice('warning', '提示', res.msg)
          }
        })
      }).catch(() => {
      })
    },
    // 编辑修改
    handleEditLog() {
      this.$refs.addData.validate((valid, field) => {
        if (valid) {
          businessAreaUpdate(this.tableData).then(res => {
            if (res.code === '000000') {
              showNotice('success', '提示', '修改成功')
              this.dialogFormVisible = false;
              this.isEdit = false;
              this.getList();
            } else {
              showNotice('warning', '提示', res.msg)
            }
          })
        } else {
          this.customValid(field)
        }
      })
    },
    //点击一行
    handleRowClick(row, column, event) {
      this.getDetail(row.id)
    },
    handleRowClick2(row, column, event) {
      // this.currentItem = row;
    },
    // 操作下拉菜单
    handleCommand(i) {
      switch (i) {
        case 0:
          this.dialogFormVisible = true;
          this.isEdit = true;
          break;
        case 1:
          this.deleteItem();
          break;
        case 2:
          this.isEdit = true;
          this.dialogFormVisible = true;
          break;
        case 3:
          this.isEdit = true;
          this.tableData.taskAdvertDtoList = [];
          this.dialogFormVisible = true;
          break;
        default:
          break;
      }
    },
    handleCheck(selection, row) {

      this.$refs.dataList.clearSelection()
      if (selection.length === 0) { // 判断selection是否有值存在
        return
      }
      if (row) {
        this.moveEnable = selection.length > 0
        this.$refs.dataList.toggleRowSelection(row, true)
        this.rowData = row
      }
    },
    handleCheck2(selection, row) {
      this.selectMateriaList = selection
    },
    handleCheck4(selection, row) {
      this.selectScreenList = selection
    },
    handleCheckChange(row) {
      if (row.length === 0) {
        this.moveEnable = false
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    // 名称搜索
    handleSearch() {
      this.getList()
    },
    // 获取计划列表
    getList() {
      const params = {
        name: this.queryParam.name,
        orgId: this.userInfo.orgList[0].id,
        pageIndex: this.paging.currentPage,
        pageSize: this.paging.pageSize
      }
      fetchBusinessList(params).then((res) => {
        if (res.code === '000000') {
          this.dataList = res.data
          if (res.data.length) {
            let index1 = res.data[0]
            this.currentItem = res.data[0]
            this.getDetail(index1.id)
          }
          const i = res.data.map((item, i) => i)
          this.paging.total = i.length
        }
      })
    },
    //获取商圈详情
    getDetail(id) {
      let data = businessDetail(id).then(res => {
        if (res.code === '000000') {
          this.currentItem = res.data;
          this.formatData(res.data)
          return res.data
        } else {
          showNotice('warning', '提示', res.msg)
        }
      })
      return data
    },
    //格式化数据
    formatData(data) {
      if (data) {
        this.currentMateria = [
          { key: '商圈名称', val: data.name },
          { key: '创建时间', val: data.crtDate },
          { key: '创建人', val: data.crtOprName },
          { key: '最后修改时间', val: data.lstEdtDate },
          { key: '最后修改人', val: data.lstEdtOprName },
          { key: '机构全称', val: data.orgName },
          { key: '机构简称', val: data.orgNameSimple },
        ]
      }

    },
    handleSizeChange(val) {
      this.paging.pageSize = val
      this.getList()
    },
    handleSizeChange2(val) {
      this.paging.pageSize = val
      this.getAdvertList()
    },
    // 监听分页
    handleCurrentChange(val) {
      this.paging.currentPage = val
      this.getList()
    },
    handleCurrentChange2(val) {
      this.paging.currentPage = val
      this.getAdvertList()
    }
  }
}
</script>
<style >
.addDialog .el-input {
  width: 100% !important;
}
</style>
<style lang="scss" scoped>
@import "@/styles/public.scss";
::v-deep .el-tree-node .el-checkbox .el-checkbox__inner {
  display: block !important;
}
.colFlex {
  display: flex;
  flex-direction: column;
}
.tree-grow {
  width: 100%;
}
.dialog ::v-deep .el-form {
  display: flex;
  justify-content: space-around;
}
.previewImg {
  width: 800px;
  height: 500px;
}
.previewVideo {
  width: 800px;
  height: 500px;
}
.previewBtn {
  margin: 10px;
}
::v-deep .el-dialog {
  height: auto;
  position: relative;
  margin: 0 auto 50px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  width: 50%;
}
::v-deep .el-dialog__title {
  color: #303133;
}
::v-deep .el-dialog__header {
  height: auto;
  padding: 20px 20px 10px;
  background-color: #fff;
}
::v-deep .el-dialog__body {
  height: auto;
  padding: 30px 20px;
}
.panelWrap {
  height: 100%;
}
.log-name {
  margin-right: 10px;
}
.activeLog {
  background: #eee;
}
.el-message-box__wrapper ::v-deep .el-input {
  width: 100% !important;
}
.main {
  width: 1000px;
  flex: 1;
}
.details {
  margin-left: 20px;
}
.addCatalog {
  padding: 5px;
  color: var(--panelWrapTitle);
  background: #fff;
  border-color: #fff;
}
.el-icon-remove-outline::before {
  margin-right: 4px;
}
.pt {
  padding-top: 20px;
  > .el-select {
    width: 185px;
  }
}
.errorImg {
  display: inline-block;
  width: 60px;
  height: 60px;
}
.sys-input {
  width: 260px;
}
.icon-qingkong:before {
  margin-right: 4px;
}
</style>

